<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交通数据分析 - 公共交通异常检测系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/traffic-analysis.css">
    <link rel="icon" href="./img/logo_nobackground.png" type="image/png">
    <style>
        /* 在head标签内添加样式 */
        .analysis-container {
            padding: 0 24px;
        }

        .analysis-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin: 24px 0;
        }

        .analysis-card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
            padding: 15px;
            height: 320px;
            display: flex;
            flex-direction: column;
        }

        .analysis-header {
            background: #fff;
            border-radius: 8px;
            padding: 20px 24px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
        }

        .data-table-section {
            background: #fff;
            border-radius: 8px;
            padding: 20px 24px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
        }

        .card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            height: 20px;
        }

        .card-title {
            font-size: 16px;
            color: #333;
            margin: 0;
        }

        .chart-container {
            width: 100%;
            flex: 1;
            min-height: 220px;  /* 调整为适中的最小高度 */
            margin-bottom: 0;
        }

        .chart-legend {
            margin-top: 0;  /* 移除顶部边距 */
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            padding: 4px 5px;
            font-size: 11px;
            line-height: 1.3;
            background-color: #f8f9fa;
            border-radius: 4px;
            position: relative;  /* 添加相对定位 */
            top: -5px;  /* 向上移动 */
        }

        .legend-item {
            display: flex;
            align-items: center;
            color: #666;
            min-width: 60px;
            padding: 2px 0;  /* 增加上下内边距 */
        }

        .legend-color {
            width: 8px;  /* 减小图例颜色块大小 */
            height: 8px;
            border-radius: 2px;
            margin-right: 4px;  /* 减小右边距 */
        }

        .comparison-card {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            background: #f8f9fa;
            border-radius: 6px;
            margin-top: -20px;  /* 增加负边距使其更往上移 */
            position: relative;
            z-index: 1;
        }

        .comparison-icon {
            font-size: 20px;
            color: #409EFF;
            margin-right: 12px;
        }

        .comparison-data {
            flex: 1;
        }

        .comparison-value {
            font-size: 20px;
            font-weight: bold;
            color: #409EFF;
            line-height: 1.2;
        }

        .comparison-label {
            font-size: 12px;
            color: #666;
            margin-top: 2px;
        }

        @media (max-width: 1200px) {
            .analysis-grid {
                grid-template-columns: repeat(2, 1fr);
                padding: 0 15px;
            }
        }

        @media (max-width: 768px) {
            .analysis-grid {
                grid-template-columns: 1fr;
                padding: 0 10px;
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 加载遮罩 -->
        <transition name="fade">
            <div v-if="loading" class="loading-overlay">
                <div class="loading-content">
                    <div class="loading-spinner">
                        <i class="el-icon-loading"></i>
                    </div>
                    <div>{{ loadingText }}</div>
                </div>
            </div>
        </transition>

        <!-- 主框架 -->
        <div class="admin-layout" v-show="!loading">
            <!-- 顶部导航栏 -->
            <header class="admin-header">
                <div class="header-left">
                    <div class="logo-section">
                        <img :src="logoUrl" alt="公共交通异常检测系统" class="header-logo" @error="handleLogoError">
                        <h1 class="system-title">公共交通异常检测系统</h1>
                    </div>
                    <div class="breadcrumb-section">
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item>交通监控</el-breadcrumb-item>
                            <el-breadcrumb-item>数据分析</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                </div>

                <div class="header-right">
                    <el-badge :value="notificationCount" class="notification-badge">
                        <el-button type="text" @click="showNotifications">
                            <i class="el-icon-bell"></i>
                        </el-button>
                    </el-badge>

                    <el-dropdown @command="handleUserCommand" class="user-dropdown">
                        <div class="user-info">
                            <el-avatar :size="32" :src="userInfo.avatar" icon="el-icon-user-solid"></el-avatar>
                            <span class="username">{{ userInfo.username }}</span>
                            <i class="el-icon-arrow-down"></i>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="profile">
                                <i class="el-icon-user"></i> 个人信息
                            </el-dropdown-item>
                            <el-dropdown-item command="settings">
                                <i class="el-icon-setting"></i> 系统设置
                            </el-dropdown-item>
                            <el-dropdown-item divided command="logout">
                                <i class="el-icon-switch-button"></i> 退出登录
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </header>

            <!-- 主内容区 -->
            <div class="admin-main">
                <!-- 侧边导航 -->
                <aside class="admin-sidebar" :class="{ 'collapsed': sidebarCollapsed }">
                    <div class="sidebar-toggle" @click="toggleSidebar">
                        <i :class="sidebarCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
                    </div>

                    <el-menu :default-active="activeMenu" :collapse="sidebarCollapsed" @select="handleMenuSelect"
                        :default-openeds="['traffic']" class="sidebar-menu">
                        <el-menu-item index="dashboard">
                            <i class="el-icon-data-board"></i>
                            <span slot="title">首页</span>
                        </el-menu-item>

                        <el-submenu index="traffic">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>交通监控</span>
                            </template>
                            <el-menu-item index="traffic-monitor">实时监控</el-menu-item>
                            <el-menu-item index="traffic-analysis">数据分析</el-menu-item>
                            <el-menu-item index="traffic-alert">预警管理</el-menu-item>
                        </el-submenu>

                        <el-submenu index="vehicle">
                            <template slot="title">
                                <i class="el-icon-truck"></i>
                                <span>车辆管理</span>
                            </template>
                            <el-menu-item index="vehicle-list">车辆列表</el-menu-item>
                            <el-menu-item index="vehicle-tracking">车辆追踪</el-menu-item>
                            <el-menu-item index="vehicle-maintenance">维护记录</el-menu-item>
                        </el-submenu>

                        <el-submenu index="data">
                            <template slot="title">
                                <i class="el-icon-pie-chart"></i>
                                <span>数据统计</span>
                            </template>
                            <el-menu-item index="data-overview">数据概览</el-menu-item>
                            <el-menu-item index="data-report">报表生成</el-menu-item>
                            <el-menu-item index="data-export">数据导出</el-menu-item>
                        </el-submenu>

                        <el-menu-item index="system">
                            <i class="el-icon-setting"></i>
                            <span slot="title">系统管理</span>
                        </el-menu-item>
                    </el-menu>
                </aside>

                <!-- 分析内容区域 -->
                <main class="admin-content">
                    <div class="analysis-container">
                        <!-- 分析头部 -->
                        <div class="analysis-header">
                            <h2 class="header-title">公共交通异常检测分析</h2>
                            <div class="filter-section">
                                <el-select v-model="selectedVehicleType" placeholder="车辆类型">
                                    <el-option v-for="type in vehicleTypes" :key="type.value" :label="type.label"
                                        :value="type.value">
                                    </el-option>
                                </el-select>
                                <el-select v-model="selectedEventType" placeholder="异常类型">
                                    <el-option v-for="type in eventTypes" :key="type.value" :label="type.label"
                                        :value="type.value">
                                    </el-option>
                                </el-select>
                                <el-select v-model="selectedTimeRange" placeholder="时间范围">
                                    <el-option v-for="range in timeRanges" :key="range.value" :label="range.label"
                                        :value="range.value">
                                    </el-option>
                                </el-select>
                                <el-button type="primary" @click="refreshAnalysis">
                                    <i class="el-icon-refresh"></i> 刷新数据
                                </el-button>
                                <el-button @click="exportData">
                                    <i class="el-icon-download"></i> 导出分析
                                </el-button>
                            </div>
                        </div>

                        <!-- 分析卡片网格 -->
                        <div class="analysis-grid">
                            <!-- 司机状态分析 -->
                            <div class="analysis-card">
                                <div class="card-header">
                                    <h3 class="card-title">司机状态分析</h3>
                                    <el-tooltip content="展示司机疲劳驾驶、情绪异常等状态监测数据" placement="top">
                                        <i class="el-icon-info info-tooltip"></i>
                                    </el-tooltip>
                                </div>
                                <div class="chart-container" id="driverStatusChart">
                                    <div v-if="loading" class="loading-overlay">
                                        <i class="el-icon-loading"></i>
                                    </div>
                                </div>
                                <div class="chart-legend">
                                    <div class="legend-item">
                                        <div class="legend-color" style="background-color: #667eea"></div>
                                        <span>疲劳驾驶</span>
                                    </div>
                                    <div class="legend-item">
                                        <div class="legend-color" style="background-color: #764ba2"></div>
                                        <span>情绪异常</span>
                                    </div>
                                    <div class="legend-item">
                                        <div class="legend-color" style="background-color: #F56C9D"></div>
                                        <span>行为违规</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 乘客异常事件分析 -->
                            <div class="analysis-card">
                                <div class="card-header">
                                    <h3 class="card-title">乘客异常事件分析</h3>
                                    <el-tooltip content="展示乘客冲突、突发疾病等异常事件统计" placement="top">
                                        <i class="el-icon-info info-tooltip"></i>
                                    </el-tooltip>
                                </div>
                                <div class="chart-container" id="passengerEventChart"></div>
                            </div>

                            <!-- 车辆类型异常分布 -->
                            <div class="analysis-card">
                                <div class="card-header">
                                    <h3 class="card-title">车辆类型异常分布</h3>
                                    <el-tooltip content="展示不同类型车辆（公交车、出租车、网约车）的异常事件分布" placement="top">
                                        <i class="el-icon-info info-tooltip"></i>
                                    </el-tooltip>
                                </div>
                                <div class="chart-container" id="vehicleTypeChart"></div>
                                <div class="comparison-card">
                                    <div class="comparison-icon">
                                        <i class="el-icon-warning"></i>
                                    </div>
                                    <div class="comparison-data">
                                        <div class="comparison-value">-15%</div>
                                        <div class="comparison-label">较上周期异常事件减少</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 详细数据表格 -->
                        <div class="data-table-section">
                            <div class="table-header">
                                <h3 class="table-title">详细数据</h3>
                                <div class="table-actions">
                                    <el-button size="small" @click="refreshTable">
                                        <i class="el-icon-refresh"></i> 刷新
                                    </el-button>
                                    <el-button size="small" type="primary" @click="exportTable">
                                        <i class="el-icon-download"></i> 导出
                                    </el-button>
                                </div>
                            </div>
                            <el-table :data="tableData" style="width: 100%" v-loading="tableLoading">
                                <el-table-column prop="time" label="时间" width="180"></el-table-column>
                                <el-table-column prop="vehicleType" label="车辆类型" width="120"></el-table-column>
                                <el-table-column prop="vehicleId" label="车辆编号" width="120"></el-table-column>
                                <el-table-column prop="eventType" label="异常类型" width="150">
                                    <template slot-scope="scope">
                                        <el-tag :type="getEventType(scope.row.eventType)" size="small">
                                            {{ scope.row.eventType }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="location" label="发生位置" width="180"></el-table-column>
                                <el-table-column prop="status" label="处理状态">
                                    <template slot-scope="scope">
                                        <el-tag :type="getStatusType(scope.row.status)" size="small">
                                            {{ scope.row.status }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="action" label="操作" width="120">
                                    <template slot-scope="scope">
                                        <el-button type="text" size="small" @click="handleDetail(scope.row)">
                                            查看详情
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="pagination-container" style="margin-top: 20px; text-align: right;">
                                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                    :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
                                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                                </el-pagination>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>

        <!-- 通知抽屉 -->
        <el-drawer title="系统通知" :visible.sync="notificationDrawer" direction="rtl" size="400px">
            <div class="notification-list">
                <div class="notification-item" v-for="notification in notifications" :key="notification.id">
                    <div class="notification-content">
                        <h4>{{ notification.title }}</h4>
                        <p>{{ notification.content }}</p>
                        <span class="notification-time">{{ notification.time }}</span>
                    </div>
                    <el-button type="text" @click="markAsRead(notification.id)">
                        <i class="el-icon-check"></i>
                    </el-button>
                </div>
            </div>
        </el-drawer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    // 系统状态
                    loading: true,
                    loadingText: '正在加载数据分析模块...',
                    sidebarCollapsed: false,
                    activeMenu: 'traffic-analysis',

                    // 用户信息
                    userInfo: {
                        username: '',
                        role: '',
                        avatar: './img/myphoto2.jpg',
                        loginTime: ''
                    },

                    // Logo
                    logoUrl: './img/logo_nobackground.png',

                    // 通知
                    notificationCount: 3,
                    notificationDrawer: false,
                    notifications: [{
                        id: 1,
                        title: '系统更新通知',
                        content: '系统将在今晚23:00进行维护更新，预计耗时2小时',
                        time: '2025-05-26 14:30',
                        read: false
                    }],

                    // 分析筛选
                    selectedVehicleType: 'all',
                    selectedEventType: 'all',
                    selectedTimeRange: 'day',
                    vehicleTypes: [{
                        value: 'all',
                        label: '全部车辆'
                    }, {
                        value: 'bus',
                        label: '公交车'
                    }, {
                        value: 'taxi',
                        label: '出租车'
                    }, {
                        value: 'ride',
                        label: '网约车'
                    }],
                    eventTypes: [{
                        value: 'all',
                        label: '全部异常'
                    }, {
                        value: 'fatigue',
                        label: '疲劳驾驶'
                    }, {
                        value: 'emotional',
                        label: '情绪异常'
                    }, {
                        value: 'passenger',
                        label: '乘客异常'
                    }],
                    timeRanges: [{
                        value: 'day',
                        label: '今日'
                    }, {
                        value: 'week',
                        label: '本周'
                    }, {
                        value: 'month',
                        label: '本月'
                    }],

                    // 表格数据
                    tableData: [],
                    tableLoading: false,
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                };
            },

            mounted() {
                this.initSystem();
                this.initCharts();
                this.loadTableData();
            },

            methods: {
                // 系统初始化
                async initSystem() {
                    try {
                        // 检查登录状态
                        const authToken = localStorage.getItem('authToken');
                        const userInfoStr = localStorage.getItem('userInfo');

                        if (!authToken || !userInfoStr) {
                            this.$message.warning('请先登录系统');
                            setTimeout(() => {
                                window.location.href = './login.html';
                            }, 1000);
                            return;
                        }

                        // 解析用户信息
                        this.userInfo = JSON.parse(userInfoStr);
                        this.loading = false;

                    } catch (error) {
                        console.error('System initialization error:', error);
                        this.$message.error('系统初始化失败');
                    }
                },

                // 图表初始化
                initCharts() {
                    this.$nextTick(() => {
                        // 初始化司机状态分析图表
                        const driverChart = echarts.init(document.getElementById('driverStatusChart'));
                        const driverOption = {
                            backgroundColor: '#ffffff',
                            title: {
                                text: '司机异常状态统计',
                                left: 'center',
                                top: 0,
                                textStyle: {
                                    fontSize: 14,
                                    fontWeight: 'normal',
                                    color: '#333'
                                },
                                padding: [0, 0, 2, 0]
                            },
                            tooltip: {
                                trigger: 'axis',
                                backgroundColor: 'rgba(255,255,255,0.9)',
                                borderColor: '#e6e6e6',
                                borderWidth: 1,
                                textStyle: {
                                    color: '#666'
                                }
                            },
                            grid: {
                                left: '8%',
                                right: '4%',
                                bottom: '8%',  /* 减小底部空间 */
                                top: '15%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
                                axisLine: {
                                    lineStyle: {
                                        color: '#e6e6e6'
                                    }
                                },
                                axisTick: {
                                    show: false
                                }
                            },
                            yAxis: {
                                type: 'value',
                                name: '异常次数',
                                nameTextStyle: {
                                    color: '#666',
                                    padding: [0, 0, 0, 5]
                                },
                                splitLine: {
                                    lineStyle: {
                                        type: 'dashed',
                                        color: '#e6e6e6'
                                    }
                                },
                                axisLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                }
                            },
                            series: [{
                                name: '疲劳驾驶',
                                type: 'line',
                                smooth: true,
                                symbolSize: 8,
                                itemStyle: {
                                    color: '#409EFF'
                                },
                                lineStyle: {
                                    width: 3
                                },
                                areaStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0,
                                            color: 'rgba(64,158,255,0.2)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(64,158,255,0)'
                                        }]
                                    }
                                },
                                data: [5, 8, 3, 4, 6, 7]
                            }, {
                                name: '情绪异常',
                                type: 'line',
                                smooth: true,
                                symbolSize: 8,
                                itemStyle: {
                                    color: '#8B6DFF'
                                },
                                lineStyle: {
                                    width: 3
                                },
                                areaStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0,
                                            color: 'rgba(139,109,255,0.2)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(139,109,255,0)'
                                        }]
                                    }
                                },
                                data: [3, 4, 2, 3, 4, 5]
                            }, {
                                name: '行为违规',
                                type: 'line',
                                smooth: true,
                                symbolSize: 8,
                                itemStyle: {
                                    color: '#F56C9D'
                                },
                                lineStyle: {
                                    width: 3
                                },
                                areaStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0,
                                            color: 'rgba(245,108,157,0.2)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(245,108,157,0)'
                                        }]
                                    }
                                },
                                data: [4, 5, 3, 5, 4, 6]
                            }]
                        };
                        driverChart.setOption(driverOption);

                        // 初始化乘客异常事件分析图表
                        const passengerChart = echarts.init(document.getElementById('passengerEventChart'));
                        const passengerOption = {
                            backgroundColor: '#ffffff',
                            title: {
                                text: '乘客异常事件类型',
                                left: 'center',
                                top: 10,
                                textStyle: {
                                    fontSize: 16,
                                    fontWeight: 'normal',
                                    color: '#333'
                                },
                                padding: [0, 0, 10, 0]
                            },
                            tooltip: {
                                trigger: 'item',
                                backgroundColor: 'rgba(255,255,255,0.9)',
                                borderColor: '#e6e6e6',
                                borderWidth: 1,
                                textStyle: {
                                    color: '#666'
                                },
                                formatter: '{b}: {c}次 ({d}%)'
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '10%',
                                top: '25%',
                                containLabel: true
                            },
                            series: [{
                                name: '异常类型',
                                type: 'pie',
                                radius: ['35%', '65%'],  // 减小饼图半径
                                center: ['50%', '55%'],  // 调整中心点位置
                                avoidLabelOverlap: true,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                label: {
                                    show: true,
                                    position: 'outside',
                                    formatter: '{b}\n{c}次',
                                    fontSize: 12,
                                    color: '#666',
                                    padding: [0, 0, 0, 0],
                                    lineHeight: 16,
                                    distanceToLabelLine: 5
                                },
                                labelLine: {
                                    length: 12,  // 减小引导线长度
                                    length2: 8,  // 减小第二段引导线长度
                                    smooth: true,
                                    maxSurfaceAngle: 80
                                },
                                emphasis: {
                                    label: {
                                        fontSize: 14,
                                        fontWeight: 'bold'
                                    },
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0,0,0,0.2)'
                                    }
                                },
                                data: [{
                                    value: 35,
                                    name: '乘客冲突',
                                    itemStyle: { color: '#409EFF' }
                                }, {
                                    value: 20,
                                    name: '突发疾病',
                                    itemStyle: { color: '#8B6DFF' }
                                }, {
                                    value: 15,
                                    name: '违规行为',
                                    itemStyle: { color: '#F56C9D' }
                                }, {
                                    value: 10,
                                    name: '其他',
                                    itemStyle: { color: '#909399' }
                                }]
                            }]
                        };
                        passengerChart.setOption(passengerOption);

                        // 初始化车辆类型异常分布图表
                        const vehicleChart = echarts.init(document.getElementById('vehicleTypeChart'));
                        const vehicleOption = {
                            backgroundColor: '#ffffff',
                            title: {
                                text: '车辆类型异常分布',
                                left: 'center',
                                top: 0,
                                textStyle: {
                                    fontSize: 14,
                                    fontWeight: 'normal',
                                    color: '#333'
                                },
                                padding: [0, 0, 2, 0]
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                },
                                backgroundColor: 'rgba(255,255,255,0.9)',
                                borderColor: '#e6e6e6',
                                borderWidth: 1,
                                textStyle: {
                                    color: '#666'
                                }
                            },
                            grid: {
                                left: '8%',
                                right: '4%',
                                bottom: '18%',  /* 增加底部空间 */
                                top: '15%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                data: ['公交车', '出租车', '网约车'],
                                axisLine: {
                                    lineStyle: {
                                        color: '#e6e6e6'
                                    }
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    color: '#666',
                                    fontSize: 12
                                }
                            },
                            yAxis: {
                                type: 'value',
                                name: '异常次数',
                                nameTextStyle: {
                                    color: '#666',
                                    padding: [0, 0, 0, 5]
                                },
                                splitLine: {
                                    lineStyle: {
                                        type: 'dashed',
                                        color: '#e6e6e6'
                                    }
                                },
                                axisLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    color: '#666',
                                    fontSize: 12
                                }
                            },
                            series: [{
                                name: '疲劳驾驶',
                                type: 'bar',
                                stack: 'total',
                                barWidth: '40%',
                                itemStyle: { 
                                    color: '#409EFF',
                                    borderRadius: [4, 4, 0, 0]
                                },
                                label: {
                                    show: true,
                                    position: 'inside',
                                    color: '#fff',
                                    fontSize: 12
                                },
                                emphasis: {
                                    itemStyle: {
                                        opacity: 0.8
                                    }
                                },
                                data: [15, 10, 8]
                            }, {
                                name: '情绪异常',
                                type: 'bar',
                                stack: 'total',
                                itemStyle: { 
                                    color: '#8B6DFF',
                                    borderRadius: [0, 0, 0, 0]
                                },
                                label: {
                                    show: true,
                                    position: 'inside',
                                    color: '#fff',
                                    fontSize: 12
                                },
                                emphasis: {
                                    itemStyle: {
                                        opacity: 0.8
                                    }
                                },
                                data: [8, 12, 10]
                            }, {
                                name: '行为违规',
                                type: 'bar',
                                stack: 'total',
                                itemStyle: { 
                                    color: '#F56C9D',
                                    borderRadius: [0, 0, 4, 4]
                                },
                                label: {
                                    show: true,
                                    position: 'inside',
                                    color: '#fff',
                                    fontSize: 12
                                },
                                emphasis: {
                                    itemStyle: {
                                        opacity: 0.8
                                    }
                                },
                                data: [12, 8, 15]
                            }]
                        };
                        vehicleChart.setOption(vehicleOption);

                        // 监听窗口大小变化，调整图表大小
                        window.addEventListener('resize', function() {
                            driverChart.resize();
                            passengerChart.resize();
                            vehicleChart.resize();
                        });
                    });
                },

                // 刷新分析数据
                refreshAnalysis() {
                    this.$message.success('数据刷新成功');
                },

                // 导出分析数据
                exportData() {
                    this.$message.success('分析数据导出中...');
                },

                // 表格相关方法
                loadTableData() {
                    this.tableLoading = true;
                    // 模拟加载数据
                    setTimeout(() => {
                        this.tableData = [{
                            time: '2025-05-26 15:00',
                            vehicleType: '公交车',
                            vehicleId: '012',
                            eventType: '疲劳驾驶',
                            location: '重庆主城区',
                            status: '正常'
                        }];
                        this.total = 100;
                        this.tableLoading = false;
                    }, 1000);
                },

                handleSizeChange(val) {
                    this.pageSize = val;
                    this.loadTableData();
                },

                handleCurrentChange(val) {
                    this.currentPage = val;
                    this.loadTableData();
                },

                // 状态样式
                getStatusType(status) {
                    const types = {
                        '待处理': 'warning',
                        '处理中': 'info',
                        '已解决': 'success',
                        '需关注': 'danger'
                    };
                    return types[status] || 'info';
                },

                getEventType(eventType) {
                    const types = {
                        '疲劳驾驶': 'success',
                        '情绪异常': 'warning',
                        '乘客异常': 'danger'
                    };
                    return types[eventType] || 'info';
                },

                // 通用方法
                toggleSidebar() {
                    this.sidebarCollapsed = !this.sidebarCollapsed;
                },

                handleMenuSelect(index) {
                    if (index === this.activeMenu) return;
                    window.location.href = index === 'dashboard' ? 'index.html' : `${index}.html`;
                },

                handleUserCommand(command) {
                    switch (command) {
                        case 'profile':
                            this.$message.info('个人信息功能开发中');
                            break;
                        case 'settings':
                            this.$message.info('系统设置功能开发中');
                            break;
                        case 'logout':
                            this.handleLogout();
                            break;
                    }
                },

                handleLogout() {
                    this.$confirm('确定要退出登录吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        localStorage.removeItem('authToken');
                        localStorage.removeItem('userInfo');
                        localStorage.removeItem('loginTime');
                        this.$message.success('已安全退出');
                        setTimeout(() => {
                            window.location.href = './login.html';
                        }, 1000);
                    });
                },

                showNotifications() {
                    this.notificationDrawer = true;
                },

                markAsRead(id) {
                    const notification = this.notifications.find(n => n.id === id);
                    if (notification && !notification.read) {
                        notification.read = true;
                        this.notificationCount = Math.max(0, this.notificationCount - 1);
                        this.$message.success('已标记为已读');
                    }
                },

                handleLogoError() {
                    this.logoUrl = '';
                },

                handleDetail(row) {
                    // 实现查看详情功能
                    console.log('查看详情:', row);
                }
            }
        });
    </script>
</body>

</html>
